<!DOCTYPE html>
<html>

<head>
    <title>Traffic Light</title>
    <link type="text/css" rel="stylesheet" href="./signal.css" />
</head>

<body>
    <div class="outer">
        <div class="area top-area">
            <div class="block top-left-block"></div>
            <div class="signal N-dir" id="N-signal"></div>
            <div class="block top-right-block"></div>
        </div>

        <div class="area mid-area">
            <div class="signal W-dir" id="W-signal"></div>
            <div class="signal E-dir" id="E-signal"></div>
        </div>

        <div class="area bottom-area">
            <div class="block bottom-left-block"></div>
            <div class="signal S-dir" id="S-signal"></div>
            <div class="block bottom-right-block"></div>
        </div>
    </div>

    <script type="text/javascript" src="./signal.js"></script>
</body>

</html>